<!--
 * @author: sanbao
 * @Date: 2022-07-23 10:37:07
-->
<style lang='scss' scoped>
</style>

<template>
  <div class="categories">
    <my-top :toplist="toplist" @handeltopbutton="handeltopbutton"></my-top>
    <my-table
      :tableData="tableData"
      :tablelist="tablelist"
      :tableid="tableid"
      @handeltablebutton="handeltablebutton"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      :pager="pager"
    ></my-table>

    <my-loanding
      :loadingdata="loadingdata"
      :loandformVal="loandformVal"
      @handelloandbutton="handelloandbutton"
    ></my-loanding>
  </div>
</template>

<script lang='ts'>
import {
  defineComponent,
  ref,
  reactive,
  toRefs,
  computed,
  onMounted,
} from "vue";
import CategoriesModel from "@/api/categories";
import { CategoriesData } from "@/type/categories";
import MyTable from "@/components/child/MyTable.vue";
import MyTop from "@/components/child/MyTop.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import MyLoanding from "@/components/child/MyLoanding.vue";
export default defineComponent({
  components: { MyTable, MyTop, MyLoanding },
  setup() {
    onMounted(() => {
      getcategorieslist();
    });
    const data = reactive(new CategoriesData());
    const list = reactive({
      loandformVal: {},
      tableid: "cat_id",
      loadingdata: {
        title: "",
        formleftwidta: "100px",
        formwidth: "30%",
        dialogFormVisible: false,
        formlist: [
          {
            type: "input",
            model: "roleName",
            label: "分类名称",
          },
          {
            type: "cascader",
            model: "roleDesc",
            label: "角色描述",
            options: [],
          },
        ],
        // 正则
        rules: {
          roleName: [
            { required: true, message: "请输入角色名称", trigger: "blur" },
          ],
        },
        formbutton: [
          {
            name: "取消",
            type: "danger",
            action: "no",
          },
          {
            name: "确定",
            type: "primary",
            action: "yes",
          },
        ],
      },
    });
    const getcategorieslist = async () => {
      const response = await CategoriesModel.getcategorieslist(
        data.pager.currentPage,
        data.pager.pageSize
      );
      if (response.data.meta.status == 200) {
        const { result, total } = response.data.data;
        data.tableData = result;
        data.pager.total = total;
      }
    };
    const getype = async () => {
      const response = await CategoriesModel.getcategoriestype();
      if (response.data.meta.status == 200) {
        list.loadingdata.formlist[1].options = response.data.data;
      }
    };
    // 页
    const handleSizeChange = (size: number) => {
      data.pager.pageSize = size;
      getcategorieslist().then(() => ElMessage.success("搜索成功"));
    };
    // 条
    const handleCurrentChange = (page: number) => {
      data.pager.currentPage = page;
      getcategorieslist().then(() => ElMessage.success("搜索成功"));
    };
    // top 按钮
    interface handeltopbutton {
      action: any;
      topVal: any;
    }
    const handeltopbutton = (anyEI: handeltopbutton) => {
      const { action } = anyEI;
      if (action == "add") {
        handleOpenDialog();
        getype();
      }
    };
    //添加弹窗
    const handleOpenDialog = () => {
      list.loadingdata.dialogFormVisible = true;
      list.loadingdata.title = "添加用户";
    };
    // 编辑弹窗
    const handleEditDialog = (id: number) => {
      list.loadingdata.dialogFormVisible = true;
      list.loadingdata.title = "用户编辑";
      // finduroleslist(id);
    };
    // 关闭弹窗
    const handlerolesReset = () => {
      list.loadingdata.dialogFormVisible = false;
      list.loandformVal = {};
    };
    //弹窗按钮
    const handelloandbutton = (anyEI: any) => {
      if (anyEI == "yes") {
        // 确定
        let data = list.loandformVal;
        addprivatelist(data);
      } else if (anyEI == "no") {
        // 取消
        handlerolesReset();
        ElMessage.success("取消");
      }
    };
    // 发送数据
    const addprivatelist = async (data: any) => {
      const response = await CategoriesModel.addprivatelist(data);
      if (response.data.meta.status == 201) {
        getcategorieslist().then(() =>
          ElMessage.success(response.data.meta.msg)
        );
      }
      handlerolesReset();
    };

    // table 按钮
    interface handeltablebutton {
      action: any;
      id: any;
    }
    const handeltablebutton = (anyEI: handeltablebutton) => {
      const { action, id } = anyEI;
      if (action == "delete") {
        // deletegoosdlist(id);
        deletecategorieslist(id);
      } else if (action == "edit") {
        ElMessage.success("待开发");
      }
    };
    // 删除方法
    const deletecategorieslist = async (id: number) => {
      ElMessageBox.confirm("确定要删除这条数据吗?", "警告！！！", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const response = await CategoriesModel.deletecategorieslist(id);
          if (response.data.meta.status == "200") {
            getcategorieslist().then(() =>
              ElMessage.success(response.data.meta.msg)
            );
          }
        })
        .catch(() => {
          ElMessage.error("取消删除");
        });
    };
    return {
      ...toRefs(data),
      ...toRefs(list),
      handeltopbutton,
      handleSizeChange,
      handleCurrentChange,
      handelloandbutton,
      handeltablebutton,
    };
  },
});
</script>
